<script>
import { main } from '@/util/mixins'
import * as service from 'services/x-start/mgr/sport'
import { flatten } from 'array-flatten'
import { mapMutations } from 'vuex'

export default {
  mixins: [main],
  data() {
    return {
      service,
      roleList: [],
    }
  },
  created() {},
  methods: {
    ...mapMutations(['setSportList']),
  },
  watch: {
    tableData() {
      this.setSportList(this.tableData)
    },
  },
}
</script>

<template lang="pug">
Template(@sizeChange="handleSizeChange" @currentChange="handleCurrentChange" ref="child")
  span(slot="title") 体育项目管理
  .btns(slot="rightBtn")
    el-button(size="mini" type="primary" plain @click="detail()") 新建体育项目
  .list(slot="list")
    el-table(
      ref="table"
      stripe
      :data="tableData"
      tooltip-effect="dark"
      fit
      @selection-change="handleSelectionChange"
    )
      el-table-column(prop="id" label="体育项目id")
      el-table-column(prop="sportName" label="体育项目名")
      el-table-column(label="创建时间")
        template(slot-scope="{row}")
          span {{row.createTime|formatTime}}
      el-table-column(label="操作" fixed="right")
        template(slot-scope="{row}")
          Icon(title="修改" type="icon-detail" @click="detail(row.id,row)")
          Icon(title="删除" type="icon-delete" @click="del(row.id)")
  .detail(slot="detail")
    .group
      .label.must 体育项目名：
      .right
        input.form-control(size="small" v-va="{ type:'required' }" vali="" v-model="detailInfo.sportName")
</template>

<style lang="stylus" scoped>
.authority
  background #efefef
  .item
    margin-bottom 10px
    padding 0 20px
    display inline-block
.detail
  >>> .el-checkbox__label
    line-height inherit
.data
  display inline-block
  line-height 40px
  li
    display inline-block
    cursor pointer
    margin-right 20px
    &.active
      color #FF6D60
</style>